<template>
	<div class="homelist" >
		<ul>
			<li v-for="(item,i) in FilterList" :key="item.id">
				<router-link :to="`bookdetail/${item.id}`">
					<img :src="`/api/public/showimg/`+item.picture" />
					<h3>{{item.name}}</h3>
					<h3>￥{{item.price}}</h3>
				<span >月销售:{{item.hot}}</span>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'MobileNameList',
		props: ['proplist'],
		data() {
			return {
				list: []
			}
		},
		watch: {
			//如果数据是请求获取，基本都是需要监听props
			proplist() {
				this.list = this.proplist;
			}
		},
		computed: {
			FilterList() {
				let filters = this.list.map((item) => {
					return {
						id: item.id,
						name: item.meno ? item.meno : item.name,
						picture: item.picture ? item.picture : item.pic,
						price: !item.price ? 0 : item.price,
						hot: item.salenum ? item.salenum : 0
					}
				});
				return filters
			}

		}

	}
</script>

<style scoped>
	.homelist{
		width: 100%;
		height: inherit;
		background-color: #f0d4a0;
	}
	.homelist header{
		line-height: 5rem;
		background-color: #f0d4a0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #A68B5B;
	}
	
	.homelist header h2{
		color: white;
		font-size: 2rem;
		margin-left: 0.5rem;
		
	}
	.homelist header a{
		display: inline-block;
		width: 8rem;
		font-size: 2rem;
		color: white;
		text-decoration: none;
	}
	.homelist ul{
		width: 90%;
		margin: 0 auto ;
		height: inherit;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		list-style: none;
		
	}
	.homelist ul li{
		width:48%;
		overflow: hidden;
		margin-bottom: 1rem;
		background-color: white;
		text-align: center;
		position: relative;
		
	}
	.homelist ul li img{
		width:60%;
		height: 100%;
		margin-top: 1rem;
	}
	.homelist ul li h3{
		width: 100%;
		height: 10%;
		line-height:2rem;
		font-size: 1rem;
		background-color: rgba(245,213,160,0.5);
		color: #A68B5B;
		text-align: center;
		font-weight: normal;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		
		/* 支持webkit内核的浏览器才能生效
		overflow: hidden;
		display: -wap-marquee;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; */
		
	}
	.homelist ul li span{
		font-size: 1rem;
		background-color: rgba(0,0,0,0.5);
		position: absolute;
		top: 0;
		right: 0;
		color: gold;
		padding: 0.4rem 0.3rem;
		/* 单独设置某个角为圆角 */
		border-radius: 0 0 0 0.6rem;
	}
	.homelist ul li div{
		font-size: 1rem;
		background-color: #faeacf;
		color: #faeacf;
		position: relative;
		color: #A68B5B;
		padding: 0.4rem 0.3rem;
		/* 单独设置某个角为圆角 */
	}
</style>